<template>
	<view class="container">
		<!-- 页面头部 -->
		<view class="header">
			<view class="header-left" @click="goBack">
				<text class="icon-back">‹</text>
			</view>
			<view class="header-title">
				<text>我的订单</text>
			</view>
			<view class="header-right">
				<text class="icon-more">⋯</text>
				<text class="icon-target">⊙</text>
			</view>
		</view>

		<!-- 订单状态标签页 -->
		<view class="tabs">
			<view 
				class="tab-item" 
				:class="{ active: activeTab === index }"
				v-for="(tab, index) in tabs" 
				:key="index"
				@click="changeTab(index)"
			>
				<text class="tab-label">{{ tab.label }}</text>
				<view class="tab-count" v-if="tab.count">
					<text class="count-number">{{ tab.count }}</text>
					<text class="count-price" v-if="tab.price">¥{{ tab.price }}</text>
				</view>
			</view>
		</view>

		<!-- 订单列表 -->
		<view class="order-list">
			<view 
				class="order-item" 
				v-for="(order, index) in orderList" 
				:key="order.id"
			>
				<view class="order-header">
					<text class="order-type">{{ order.type }}</text>
					<text class="order-status">{{ order.status }}</text>
				</view>
				
				<view class="order-time">
					<text>{{ order.date }}</text>
					<text>{{ order.time }}</text>
				</view>
				
				<view class="order-content">
					<view class="product-image">
						<image :src="order.image" mode="aspectFill"></image>
					</view>
					<view class="product-info">
						<text class="product-name">{{ order.productName }}</text>
						<text class="product-price">¥{{ order.price }}</text>
					</view>
				</view>
				
				<view class="order-divider"></view>
				
				<view class="order-footer">
					<text class="order-number">订单号: {{ order.orderNo }}</text>
					<view class="order-actions">
						<view class="action-btn" @click="orderAgain(order.id)">
							<text>再来一单</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			activeTab: 2, // 默认选中"待付款"标签
			tabs: [
				{ label: '待收货', count: '168.62' },
				{ label: '待发货', count: '' },
				{ label: '待付款', count: '42x', price: '21.44' },
				{ label: '待评价', count: '169.23' },
				{ label: '退款售后', count: '' }
			],
			orderList: [
				{
					id: 1,
					type: '订单类型',
					status: '已完成',
					date: '2025-07-07',
					time: '11:31:30',
					image: '/static/images/profile.jpg',
					productName: 'XXXXXX订单对象',
					price: '1950',
					orderNo: 'RC2023120100010'
				},
				{
					id: 2,
					type: '订单类型',
					status: '已完成',
					date: '2025-07-07',
					time: '11:31:30',
					image: '/static/images/profile.jpg',
					productName: 'XXXXXX订单对象',
					price: '1950',
					orderNo: 'RC2023120100011'
				},
				{
					id: 3,
					type: '订单类型',
					status: '已完成',
					date: '2025-07-07',
					time: '11:31:30',
					image: '/static/images/profile.jpg',
					productName: 'XXXXXX订单对象',
					price: '1950',
					orderNo: 'RC2023120100012'
				}
			]
		}
	},
	
	onLoad() {
		this.loadOrders()
	},
	
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		
		// 切换标签页
		changeTab(index) {
			this.activeTab = index
			this.loadOrders()
		},
		
		// 加载订单数据
		loadOrders() {
			// 这里可以根据选中的标签页加载对应的订单数据
			console.log('加载订单数据，当前标签:', this.tabs[this.activeTab].label)
		},
		
		// 再来一单
		orderAgain(orderId) {
			console.log('再来一单，订单ID:', orderId)
			uni.showToast({
				title: '正在为您重新下单',
				icon: 'success'
			})
		}
	}
}
</script>

<style scoped lang="scss">
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

/* 页面头部 */
.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #eee;
	position: sticky;
	top: 0;
	z-index: 100;
}

.header-left, .header-right {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.icon-back, .icon-more, .icon-target {
	font-size: 36rpx;
	color: #333;
	font-weight: bold;
}

.header-title text {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

/* 标签页 */
.tabs {
	display: flex;
	background-color: #fff;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx 10rpx;
	position: relative;
}

.tab-label {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 10rpx;
}

.tab-count {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.count-number {
	font-size: 24rpx;
	color: #666;
}

.count-price {
	font-size: 24rpx;
	color: #ff4757;
	background-color: #ffe0e0;
	padding: 4rpx 8rpx;
	border-radius: 8rpx;
	margin-top: 4rpx;
}

.tab-item.active .tab-label {
	color: #4a90e2;
	font-weight: bold;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background-color: #4a90e2;
	border-radius: 2rpx;
}

/* 订单列表 */
.order-list {
	padding: 20rpx;
}

.order-item {
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

/* 订单头部 */
.order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.order-type {
	font-size: 28rpx;
	color: #4a90e2;
	font-weight: 500;
}

.order-status {
	font-size: 28rpx;
	color: #999;
}

/* 订单时间 */
.order-time {
	display: flex;
	gap: 20rpx;
	margin-bottom: 20rpx;
}

.order-time text {
	font-size: 24rpx;
	color: #666;
}

/* 订单内容 */
.order-content {
	display: flex;
	align-items: center;
	gap: 20rpx;
	margin-bottom: 20rpx;
}

.product-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 12rpx;
	overflow: hidden;
	background-color: #f0f0f0;
}

.product-image image {
	width: 100%;
	height: 100%;
}

.product-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.product-name {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.product-price {
	font-size: 32rpx;
	color: #ff4757;
	font-weight: bold;
}

/* 分割线 */
.order-divider {
	height: 1rpx;
	background: linear-gradient(to right, transparent, #ddd, transparent);
	margin: 20rpx 0;
}

/* 订单底部 */
.order-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.order-number {
	font-size: 24rpx;
	color: #999;
}

.order-actions {
	display: flex;
	gap: 20rpx;
}

.action-btn {
	background-color: #4a90e2;
	color: #fff;
	padding: 12rpx 24rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	transition: all 0.3s ease;
}

.action-btn:active {
	transform: scale(0.95);
	background-color: #3a7bc8;
}
</style> 